<template>
	<view class="home">
    <!-- 搜索框 -->
    <Search/>
    <view class="neirong">
      <!-- 轮播图 -->
      <swiper class="swiperList" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" @click="golist($event)">
        <swiper-item v-for="item in bannerList" :key="item.goods_id">
          <view class="swiper-item">
            <img :src="item.image_src" alt="图片加载失败!" :data-url="item.navigator_url" data-name="loop"/>
          </view>
        </swiper-item>
      </swiper>
      <!-- 导航栏 -->
      <view class="navbox">
          <view class="imgitem" v-for="(item,index) in navList" :key="index">
            <navigator v-if="item.navigator_url" url="/pages/cate/cate" 	open-type="switchTab">
              <img :src="item.image_src" alt="图标加载失败!"/>
            </navigator>
            <img v-else :src="item.image_src" alt="图标加载失败!"/>
          </view>
      </view>
      <!-- 楼层 -->
      <view class="content" @click="goSearchList($event)">
        <view class="contentItem" v-for="(item,index) in contentList" :key="index">
          <img :src="item.floor_title.image_src" alt="图片加载失败!" class="content-title"/>
          <view class="item_sub">
            <view class="product_listLeft">
              <!-- <navigator :url="item.product_list[0].navigator_url" :open-type="item.product_list[0].open_type"> -->
                <img :src="item.product_list[0].image_src" alt="图片加载失败!" data-name="img" :data-item="item.product_list[0].navigator_url"/>
              <!-- </navigator> -->
            </view>
            <view class="product_listRight">
              <view class="rightitem">
                <view v-for="(subitem, subindex) in item.product_list.slice(1,3)" :key="subindex">
                  <!-- <navigator :url="subitem.navigator_url" :open-type="subitem.open_type"> -->
                    <img :src="subitem.image_src" alt="图片加载失败!" data-name="img" :data-item="subitem.navigator_url"/>
                  <!-- </navigator> -->
                </view>
              </view>
              <view class="rightitem">
                <view v-for="(subitem, subindex) in item.product_list.slice(3,)" :key="subindex">
                  <!-- <navigator :url="subitem.navigator_url" :open-type="subitem.open_type"> -->
                    <img :src="subitem.image_src" alt="图片加载失败!"  data-name="img" :data-item="subitem.navigator_url"/>
                  <!-- </navigator> -->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 楼层结束 -->
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList:[],
        navList:[],
        contentList: []
			}
		},
		onLoad() {
      this.getdata()
      this.getNav()
      this.getContent()
		},
		methods: {
      async getdata(){
        let {data} = await uni.$http.get("home/swiperdata")
        if(data.meta.status !== 200) return wx.showToast({title:"数据请求失败！"})
        this.bannerList = data.message
        // console.log(data.message);
      },
      async getNav(){
        let {data} = await uni.$http.get("home/catitems")
        if(data.meta.status !== 200) return wx.showToast({title:"数据请求失败！"})
        this.navList = data.message
        // console.log(data.message);
      },
      async getContent(){
        let {data} = await uni.$http.get('home/floordata') 
        if(data.meta.status !== 200) return wx.showToast({title:"数据请求失败！"})
        // console.log(data.message);
        this.contentList = data.message
      },
      goSearchList(e){
        let data = e.target.dataset;
        if(data.name !== 'img') return
        // console.log(data);
        let key = data.item.split('=')[1]
        wx.navigateTo({url:'/pages/searchPage/searchPage'})
        setTimeout(() => {
          uni.$emit('searchimg', key)
        },500)
      },
      golist(e){
        let data = e.target.dataset
        let url = data.url.split('=')[1]
        if(data.name !== 'loop') return
        // console.log(data);
        wx.navigateTo({url:'/pages/shopdetail/shopdetail?goods_id='+url})
      }
		}
	}
</script>

<style lang="scss" scoped>
  .home{
    overflow: hidden;
    height: 100%;
    .neirong{
      height: calc( 100vh - 110rpx );
      overflow: auto;
      // 轮播图
      .swiperList{
        height: 350rpx;
        .swiper-item{
          width: 100%;
          img{
            width: 100%;
            height: 350rpx;
          }
        }
      }
      // 导航栏
      .navbox{
        display: flex;
        justify-content: space-around;
        padding-top: 40rpx;
        img{
          width: 120rpx;
          height: 130rpx;
        }
      }
      // 楼层
      .content{
        padding-top: 55rpx;
        .content-title{
          height: 50rpx;
          width: 750rpx;
        }
        .item_sub{
          display: flex;
          padding: 0 8rpx;
          box-sizing: border-box;
          .product_listLeft{
            width: 240rpx;
            margin-right: 8rpx;
            img{
              width: 100%;
              height: 400rpx;
              border-radius: 10rpx;
            }
          }
          .product_listRight{
            width: calc( 100% - 250rpx );
            .rightitem{
              display: flex;
              view{
                width: 230rpx;
                height: 192rpx;
                padding: 0 6rpx 0 8rpx;
                img{
                  width: 230rpx;
                  height: 192rpx;
                }
              }
            }
            .rightitem:first-child{
              padding-bottom: 16rpx;
            }
          }
        }
      }
    }
  }
  
</style>
